<template>
  <div class="mx-[0.875rem] my-[1rem]">
    <AppGlobalSearch @close="() => showSearchBar = false" @focus="showSearchBar = true" @gameTypeChange="v => gameType = v"/>
    <div v-show="!showSearchBar">
      <template v-if="gameType === '1'">
        <div class="rounded-[0.375rem] my-[0.75rem]">
          <AppMenuItem :menu-item="item" @click="() => handleClickItem(item)" v-for="item, i in casinoMenu" :key="i" class="bg-bg-black-4 rounded-[0.375rem] my-[0.25rem]"/>
        </div>
        <div class="bg-bg-black-4 rounded-[0.375rem] mb-[1rem] py-[0.5rem]">
          <div class="px-[0.625rem] py-[0.5rem] text-[0.875rem] font-[600] text-text-white-0">{{t('game')}}</div>
            <AppMenuItem :menu-item="item" @click="() => handleClickItem(item)" v-for="item, i in casinoGameList" :key="i" />
          </div>
      </template>
      <template v-else>
        <div class="rounded-[0.375rem] my-[0.75rem]">
          <AppMenuItem :menu-item="item" @click="() => handleClickItem(item)" v-for="item, i in sportsMenu" :key="i" class="bg-bg-black-4 rounded-[0.375rem] my-[0.25rem]"/>
        </div>
        <AppBaseAccordion :list="sportHotGames" :groupTitle="t('hot_sport_games')" class="mb-[1rem]"></AppBaseAccordion>
        <AppBaseAccordion :list="sportGameList" class="mb-[1rem]"></AppBaseAccordion>
        <AppBaseAccordion :list="sportOddType" class="mb-[1rem]" :current="sportsOddsType"></AppBaseAccordion>
      </template>
      <AppBaseAccordion :list="staticMenu1" @cb="signoutShow = true"></AppBaseAccordion>
      <AppBaseAccordion :list="staticMenu2" class="mt-[1rem]" :current="userLanguage"></AppBaseAccordion>
    </div>
    <BaseSheet
        v-model="signoutShow"
        :title="t('logout')"
    >
        <div class="px-[.875rem] pb-[1.875rem]">
            <div class="mb-[1rem] text-text-white-2 text-[.75rem] text-center">{{ t('logout_confirm_message') }}</div>
            <div class="flex w-full gap-[.625rem]">
                <BaseButton type="secondary" class="flex-1 text-[.875rem] font-[600]" @click="signoutShow = false">{{ t('common_cancel') }}</BaseButton>
                <BaseButton type="primary" class="flex-1 text-[.875rem] font-[600]" @click="runMemberLogout" :loading="logoutLoading">{{ t('logout') }}</BaseButton>
            </div>
        </div>
    </BaseSheet>
  </div>
</template>
<script setup lang="ts">
  const appStore = useAppStore()
  const { t } = useI18n()
  const showSearchBar = ref(false)
  const signoutShow = ref(false)
  const { isLogin, userInfo } = storeToRefs(appStore)
  const { isSportsLoginSusses } = storeToRefs(useSportsStore())
  const route = useRoute()
  const initCasino = route.name?.toString().includes('casino')
  const initSports = route.name?.toString().includes('sports')
  const { userLanguage } = storeToRefs(useLanguageStore())
  const initOthers = !initCasino && !initSports
  const gameType = ref(initCasino ? '1' : initSports ? '2' : '1')
  /** 体育赔率展示方式 */
  const sportsOddsType = ref(getSportsOddsType())
  const {
    casinoMenu,
    casinoGameList,
    staticMenu1,
    staticMenu2,
    menuItemClick,
  } = useApiMenuData()

  const {
  sportsMenu = [],
  sportHotGames = [],
  sportGameList = [],
} = storeToRefs(useSportsStore())

  const AllOddsTypes = computed(() => Object.values(EnumSportsOddsType).map(m => ({ title: t(m), value: m })))
  console.log(AllOddsTypes.value)
/** 设置当前体育赔率展示方式 */
  function setSportsOddsType(type: EnumSportsOddsType) {
    sportsOddsType.value = type
    Local.set(STORAGE_SPORTS_ODDS_TYPE_KEY, type)
  }

  /** 获取当前体育赔率展示方式 */
  function getSportsOddsType() {
    const value = Local.get<EnumSportsOddsType>(STORAGE_SPORTS_ODDS_TYPE_KEY)?.value
    if (value)
      return value
    else
      return EnumSportsOddsType.DECIMAL
  }

  const sportOddType = computed(() => <Menu>[
    {
      title: `${t('sports_odds_title', { other: 'cược' })}${userLanguage.value === 'zh-CN' ? '：' : ': '}${t(sportsOddsType.value)}`,
      path: '',
      icon: 'menu-language',
      value: sportsOddsType.value,
      change: (val: EnumSportsOddsType) => setSportsOddsType(val),
      type: 'sheet',
      sheetTitle: t('choose_odd'),
      children: AllOddsTypes.value,
      domId: 'sports-odds-type',
    },
  ])

function handleClickItem(item: MenuItem) {
  if ((item.token && !isLogin.value) || (item.sptToken && !isSportsLoginSusses.value))
    return
  menuItemClick(item)
}

const { runMemberLogout, logoutLoading } = useLogout(() => {
  signoutShow.value = false
})


</script><style scoped>
.accordion-enter-active, .accordion-leave-active {
  transition: all 0.3s ease;
}
.accordion-enter-from, .accordion-leave-to {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}
.accordion-enter-to, .accordion-leave-from {
  max-height: 500px;
  opacity: 1;
}
</style>